<template>
	<view class="container">
		<view class="indexDetails_swiper_box">
			<image src="/static/index/nav_back_19.png" class="indexDetails_back" @tap.stop="getBack"></image>
			<swiper  :interval="3000" :duration="1000" circular="true" class="indexDetails_swiper" @change="swiperChange">
				<swiper-item v-for="(imgitem,imgindex) in images" :key='imgindex'>
					<image :src="imgitem" class="indexDetails_swiper_banner" @tap="previewImages(imgindex)"></image>
				</swiper-item>
			</swiper>
			<view class="indexDetails_dots" v-if="images.length>0">
				<text>{{nowDots}}</text>
				<text>/</text>
				<text>{{images.length}}</text>
			</view>
		</view>
		<view class="workerinfo">
			<view class="worker-infoitem">
				<text class="workername">姓名: {{workerinfo.name}}</text>
			</view>
			<view class="worker-infoitem">
                <view class="worker-goodat">
                	<u-icon name="/static/icon_sc_50.png" size="28"></u-icon>
					<text>擅长:{{workerinfo.nameOfWorkType}}</text>
                </view>				
			</view>
			<view class="worker-infoitem worker-price">
				<text class="worker-price-left">本地参考价:<text style="color: red;">{{workerinfo.referencePrice}}元</text></text>
				<text class="worker-price-right">距离2.8km</text>
			</view>
			<view class="worker-infoitem">
				<text class="worker-have-item">工号: {{workerinfo.id}}</text>
				<text class="worker-have-item seconditem" v-if="workerinfo.isTruck==1">有货车</text>
				<text class="worker-have-item seconditem" v-if="workerinfo.isTruck==0">无货车</text>
				<text class="worker-have-item thirditem">售后{{workerinfo.afterSalesDays}}天</text>
			</view>
			<view class="worker-infoitem">
				<view class="star-rates">
					<u-rate  v-model="workerinfo.starCount" active-color="rgba(255, 178, 0, 1)" size="25" :disabled="true"></u-rate>
					<text>{{Number(workerinfo.starCount)|getRatePoints}}分</text>
				</view>
				<text class="commitsmany">{{workerinfo.numberOfComments}}条评论</text>
			</view>
			<view class="worker-infoitem">
				<text class="jdtimes">接单次数: {{workerinfo.numberOrdersReceived}}次</text>
			</view>
			<view class="worker-infoitem">
				<view class="worker-status">
					<text v-if="workerinfo.userStatus==1">状态：正在工作中（预计40分钟完工）</text>
					<text v-else-if="workerinfo.userStatus==2">状态：师傅空闲中</text>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="worker-cases">
			<text class="case-title">施工案例</text>
			<view class="cases-right" @tap="navigateToWorkercases(workerinfo.id)">
				<view class="caseitem" v-for="(caseitem,caseindex) in caseList" :key="caseitem.id">
					<image :src="caseitem.img" mode=""></image>
				</view>
				<u-icon name="/static/icon_jr_52.png" size="13"></u-icon>
			</view>
		</view>
		<view class="line"></view>
		<view class="worker-commits">
			<view class="worker-commits-top">
				<text class="worker-commits-title">用户评价（{{workerinfo.numberOfComments}}）</text>
				<view class="ckall-commits">
					<text>查看全部</text>
					<u-icon name="/static/icon_jr_52.png" size="13"></u-icon>
				</view>
			</view>
			<view class="worker-commit-item" v-for="(commititem,commitindex) in committexts" :key="commitindex">
				<view class="commiter-info">
					<u-avatar :src="commititem.userPortrait" size="90"></u-avatar>
					<view class="commiter-info-right">
						<text class="commiter-name">{{commititem.name}}</text>
						<text class="publish-time">{{commititem.creationTime}}</text>
					</view>
				</view>
				<view class="commit-rates">
					<text>评分</text>
					<u-rate  v-model="commititem.starRating" active-color="rgba(255, 178, 0, 1)" size="25"></u-rate>
				</view>
				<view class="commit-add">
					<text>{{commititem.position}}</text>
				</view>
				<view class="commit-content">
					<text>{{showcommitText(commitindex)}}</text>
					<text class="showall" v-on:click="showAlltexts(commitindex)" v-if="!isShowall[commitindex]">展开</text>
				</view>
				<view class="commit-images" :class="{'oneimg':commititem.img.split(',').length==1,'twoimg':commititem.img.split(',').length==2,'moreimg':commititem.img.split(',').length>2}">
					<image :src="commitimage" mode="" v-for="(commitimage,imagesindex) in commititem.img.split(',')" v-on:click="previewCommitImages(commitindex,imagesindex)"></image>
				</view>
			</view>
		</view>
		<view class="page-bottomnav">
			<view class="page-bottomnav-left">
				<view class="contact-worker-item">
					<image src="/static/zixun-icon.png" mode=""></image>
					<text>咨询</text>
				</view>
				<view class="contact-worker-item" @tap="callworkerPhone()">
					<image src="/static/tel-icon.png" mode=""></image>
					<text>电话</text>
				</view>
			</view>
			<view class="page-bottomnav-right">
				<view class="yuyue-worker" @tap="openSubscribepopup(workerinfo.name)">
					<text>立即预约</text>
				</view>
				<view class="guyong-worker" @tap="employWorker()">
					<text>雇佣</text>
				</view>
			</view>
		</view>
		<u-popup mode="bottom" :closeable="true" close-icon-pos="top-left" border-radius="20" v-model="isshowSubscribe">
			<text class="subscribeTitle">预约{{workerNowName}}师傅上门</text>
			<text class="subscribePrompt">师傅收到后会主动联系您，沟通具体的服务流程</text>
			<view class="subscribe-form">
				<form @submit="requestSubscrbeWorker" @reset="">
					<view class="input-cell name-input-cell">
						<view class="input-cell-left">
							<text>姓名</text>
						</view>
						<view class="input-cell-right">
							<input type="text" value="" placeholder="输入您的名字" v-model="username"/>
						</view>
					</view>
					<view class="input-cell phone-input-cell">
						<view class="input-cell-left">
							<text>手机号</text>
						</view>
						<view class="input-cell-right">
							<input type="number" value="" placeholder="输入手机号码" v-model="userphone"/>
						</view>
					</view>
					<view class="input-cell code-input-cell">
						<view class="input-cell-left">
							<text>验证码</text>
						</view>
						<view class="input-cell-right">
							<input type="number" value="" placeholder="请输入验证码" v-model="code"/>
							<text v-if="allowGetcode" class="getcode toptext" @tap="sendCode()">发送验证码</text>
							<text v-else class="awaitgetcode toptext">{{awaitGetcodeText}}</text>
						</view>
					</view>
					<view class="input-cell type-input-cell">
						<view class="input-cell-left">
							<text>工种</text>
						</view>
						<view class="input-cell-right" @tap="openWorktypelist(workerinfo.nameOfWorkType)">
							<text class="changetype toptext">{{plaseChooseWork}}</text>
							<image src="/static/icon_zy_189.png" mode="" class="right-icon"></image>
						</view>
					</view>
					<view class="input-cell time-input-cell">
						<view class="input-cell-left">
							<text>时间</text>
						</view>
						<view class="input-cell-right">
                              <view class="changeServicetime">
                              	 <text class="change-servicetime"  @tap="opendate()" v-if="subscribeTime==''">请选择上门日期</text>
								 <text class="change-servicetime"  @tap="opendate()" v-else>{{subscribeTime}}</text>
								 <text class="change-servicetime serviceclock" @tap="openTimepicker()" v-if="!issetTime">请选择上门时间段</text>
								  <text class="change-servicetime serviceclock" @tap="openTimepicker()" v-else>{{timequjian}}</text>
                              </view>
							  <image src="/static/icon_zy_189.png" mode="" class="right-icon"></image>
						</view>
					</view>
					<view class="input-cell add-input-cell">
						<view class="input-cell-left">
							<text>装修地址</text>
						</view>
						<view class="input-cell-right" @tap="navigateToaddress()">
							<text class="editadd toptext" v-if="comeadd==''">选择上门地址</text>
							<text class="editadd toptext" v-else>{{comeadd}}</text>
							<image src="/static/icon_zy_189.png" mode="" class="right-icon"></image>
						</view>
					</view>
					<button class="submit-subscribe" form-type="submit" >立即预约</button>
				</form>
			</view>
		</u-popup>
		<!-- 硬装类-工种分类 -->
		<u-popup mode="bottom" v-model="isShowworkTypepopup" @close="workClose">
			<view class="worktypes">
				<view class="worktype-item" v-for="(typeitem,typeindex) in workerTypes" :key="typeitem.id" :class="{'activetype':arr.includes(typeitem)}" @tap="selectWorkertype(typeitem,typeindex)">
					<text>{{typeitem}}</text>
				</view>
			</view>
		</u-popup>
		<!-- 选择上门日期 -->
		 <good-date-picker ref="subscribeTimes" @change="changeDate" :option="subscribeTimesoption"></good-date-picker>
		 <!-- 选择上门时间 -->
		 <u-picker mode="multiSelector" v-model="showTimepicker"  :default-selector="timeSelected" :range="timeSelector" confirm-color="rgba(14, 174, 100, 1)" title="请选择时间段" @confirm="selectTimequjian" @cancel="closeTimepicker()"></u-picker>
	</view>
</template> 

<script>
	import {getWorkerinfo,url,getWorkercases,sendCode,classList,subscribeWorker,workerCommitlist} from '@/apis/request.js';
	import GoodDatePicker from '@/components/xiaomiaogu-good-date-picker/xiaomiaogu-good-date-picker.vue';
	export default {
		components:{GoodDatePicker},
		data() {
			return {
				images:[],
				nowDots:1,
				ratevalue:5,
				//模拟数据 评价文本
				committexts:[],
				isShowall:[false,false,false],
				workerid:'',
				workerinfo:{},
				isshowSubscribe:false,
				allowGetcode:true,
				url:'',
				workeruid:'',
				caseList:[],
				isShowworkTypepopup:false,
				username:'',
				userphone:'',
				code:'',
				sendcode:'',
				subscribeTimesoption:{
					chooseOneDate: '', //根据实际业务需求设置的默认单选日期，可为空,默认今天
					initStartDate: '', //可选起始时间，可为空,默认今天
					initEndDate: '', //可选结束时间，可为空,默认4个月后
					isRange: false, //是否开启范围选择，默认false
					isModal:true,//是否弹窗模式，默认false
				},
				subscribeTime:'',
				showTimepicker:false,
				timeSelector:[],
				timeSelected:[0,0,0,0,0],
				timequjian:'',
				issetTime:false,
				awaitGetcodeText:'',
				workerTypes:[],
				activetype:-1,
				usertoken:'',
				comeadd:'',
				workerNowName:'',
				ifChoose:false,
				arr:[],
				plaseChooseWork:'请选择工种'
			}
		},
		created() {
			this.url=url;
			const thisdate=new Date();
			const thisdate_nextweek = new Date(thisdate);
			thisdate_nextweek.setDate(thisdate.getDate()+7);
			const thisdate_nextweek_year=thisdate_nextweek.getFullYear();
			const thisdate_nextweek_month = thisdate_nextweek.getMonth()+1;
			const thisdate_nextweek_day = thisdate_nextweek.getDate();
			this.$set(this.subscribeTimesoption,'initEndDate',`${thisdate_nextweek_year}-${thisdate_nextweek_month}-${thisdate_nextweek_day}`);
		    const hours = new Array();
			for(let hour=0;hour<24;++hour){
				hours.push(`${hour}时`);
			}
			const minutes = new Array();
			for(let minute=0;minute < 60;++minute){
				minutes.push(`${minute}分`);
			}
			this.timeSelector.push(hours);
			this.timeSelector.push(minutes);
			this.timeSelector.push(['至']);
			this.timeSelector.push(hours);
			this.timeSelector.push(minutes);
		},
		onLoad(options) {
			this.workerid=options.workerid;
			this.workeruid=options.workeruid;
			this.usertoken=uni.getStorageSync('userInfo').token;
			this.requestGetworkerInfo(options.workerid);
			// this.requestWorkertypes();
			this.requestAboutWorkercommits();
		},
		onShow() {
			if(uni.getStorageSync('comeaddInfo')){
				const area=uni.getStorageSync('comeaddInfo').area;
				const add=uni.getStorageSync('comeaddInfo').address;
				this.comeadd=`${area}${add}`;
			}
		},
		methods: {
			 onShowDatePicker(){//显示
			      this.showPicker = true;
			},
			swiperChange(e){
				this.nowDots = e.detail.current+1
			},
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			previewImages(current){
				uni.previewImage({
					urls:this.images,
					current:current,
					indicator:'number'
				});
			},
			//展开评论文本
			showAlltexts(index){
			      this.$set(this.isShowall,index,true);
			},
			previewCommitImages(commitindex,imagesindex){
				const that=this;
				console.log(commitindex,imagesindex)
				console.log(that.committexts[commitindex].img)
				uni.previewImage({
					current:imagesindex,
					urls:that.committexts[commitindex].img.split(','),
					indicator:"default"
				})
			},
			requestGetworkerInfo(id){
				this.$http({
					url:getWorkerinfo,
					method:"GET",
					data:{
						id:id
					},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					console.log(res,'师傅详情')
					if(res[1].data.status=='200'){
						this.workerinfo=res[1].data.data;
						for(const item of res[1].data.data.img){
							this.images.push(`${this.url}${item}`);
						}
						this.requestWorkercases();
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			openSubscribepopup(name){
				this.workerNowName=name
				this.isshowSubscribe=true;
			},
			requestWorkercases(){
				this.$http({
					url:getWorkercases,
					data:{
						masterId:this.workerinfo.id
					},
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						if(res[1].data.data.length>3){
						    this.caseList=res[1].data.data.splice(0,3);
						}else{
							this.caseList=res[1].data.data;
						}
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			callworkerPhone(){
				uni.makePhoneCall({
					phoneNumber:this.workerinfo.phone
				});
			},
			//打开工种分类弹出层
			openWorktypelist(type){
				this.workerTypes= type.split(',')
				this.isShowworkTypepopup=true;
			},
			workClose(){
				if(this.arr.length==0){
					this.plaseChooseWork='请选择工种'
				}else{
					this.plaseChooseWork = this.arr.toString()
				}
			},
			//选择工种
			selectWorkertype(item,i){
				 if(this.arr.includes(item)){
				                //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
				                //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
				                this.arr=this.arr.filter(function (ele){return ele != item;});
				            }else{
				                this.arr.push(item);
				            }
						
			},
			// requestWorkertypes(){
			// 	this.$http({
			// 		url:classList,
			// 		data:{
			// 			pageIndex:1,
			// 			pageSize:100,
			// 			superiorId:1
			// 		},
			// 		method:"POST",
			// 		header:{
			// 			'content-type':'application/x-www-form-urlencoded'
			// 		}
			// 	})
			// 	.then(res=>{
			// 		// console.log(res);
			// 		if(res[1].data.status=='200'){
			// 			this.workerTypes=res[1].data.data;
			// 		}
			// 	})
			// 	.catch(err=>{
			// 		console.log(err);
			// 	});
			// },
			//预约工人
			requestSubscrbeWorker(){
				 if(this.username == ''){
					 uni.showToast({
					 	'icon':'none',
						'title':'请输入您的姓名'
					 });
					 return ;
				 }
				 if(this.userphone == ''){
					 uni.showToast({
					 	icon:'none',
						title:'请输入您的手机号'
					 });
					 return ;
				 }
				 if(this.sendcode == ''){
					 uni.showToast({
					 	icon:'none',
						title:'请发送验证码'
					 });
					 return ;
				 }
				 if(this.code == ''){
					 uni.showToast({
					 	icon:'none',
						title:'请输入验证码'
					 });
					 return ;
				 }
				 if(this.code != this.sendcode){
					 uni.showToast({
					 	icon:'none',
						title:'验证码不一致'
					 });
					 return ;
				 }
				 if(this.plaseChooseWork=='请选择工种'){
					 uni.showToast({
					 	icon:'none',
						title:'请选择预约工人工种'
					 });
					 return ;
				 }
				 if(this.subscribeTime == ''){
					 uni.showToast({
					 	icon:'none',
						title:'请选择上门日期'
					 });
					 return ;
				 }
				 if(!this.issetTime){
					 uni.showToast({
					 	icon:'none',
						title:'请选择上门时间段'
					 });
					 return ;
				 }
				 this.$http({
					 url:subscribeWorker,
					 data:{
						 makeTime:`${this.subscribeTime} ${this.timequjian}`,
						 address:this.comeadd,
						 name:this.username,
						 nameOfWorkType:this.plaseChooseWork,
						 phone:this.userphone,
						 vcode:this.code
					 },
					 method:"POST",
					 header:{
						 'content-type':'application/x-www-form-urlencoded',
						 'Token':this.usertoken
					 }
				 })
				 .then(res=>{
					 console.log(res,'预约');
					 if(res[1].data.status=='200'){
						 uni.showToast({
						 	title:'提交成功'
						 });
						 setTimeout(()=>{
							 uni.navigateTo({
							 	url:'../subcribesuccess/subcribesuccess'
							 });
						 },200);
						 this.isshowSubscribe=false;
					 }
				 })
				 .catch(err=>{
					console.log(err); 
				 });
			},
			opendate() {
				this.$refs.subscribeTimes.open();
			},
			changeDate(e) {
				this.$set(this.subscribeTimesoption,'chooseOneDate',e.currentDate);
				this.subscribeTime=e.currentDate;
			},
			openTimepicker(){
				this.showTimepicker=true;
			},
			selectTimequjian(e){
				// console.log(e)
				const starthour=e[0];
				const startminute=e[1];
				const endhour=e[3];
				const endminute=e[4];
				if(endhour < starthour){
					uni.showToast({
						icon:'none',
						title:'开始时间不得大于结束时间'
					}); 
					return ;
				}else if(endhour==starthour && endminute < startminute){
					uni.showToast({
						icon:'none',
						title:'开始时间不得大于结束时间'
					});
					return ;
				}
				this.timeSelected=e;
				this.timequjian=`${this.timeSelector[0][e[0]]}${this.timeSelector[1][e[1]]}${this.timeSelector[2][e[2]]}${this.timeSelector[3][e[3]]}${this.timeSelector[4][e[4]]}`;
				this.issetTime=true;
				this.closeTimepicker();
			},
			closeTimepicker(){
				this.showTimepicker=false;
			},
			sendCode(){
				if(this.userphone==''){
					uni.showToast({
						icon:'none',
						title:'请填写手机号'
					});
					return ;
				}
				if(this.userphone.length != 11 || isNaN(this.userphone)){
					uni.showToast({
						icon:'none',
						title:'请认真填写手机号'
					});
					return ;
				}
				this.$http({
					url:sendCode,
					data:{
						phone:this.userphone
					},
					method:"GET",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						this.sendcode=res[1].data.data;
						this.allowGetcode=false;
						let seconds = 60;
						this.awaitGetcodeText=`${seconds}s后重新发送`;
						let timer=setInterval(()=>{
							--seconds;
							this.awaitGetcodeText=`${seconds}s后重新发送`;
						},1000);
						setTimeout(()=>{
							clearInterval(timer);
							this.allowGetcode=true;
						},60000);
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			navigateToaddress(){
				uni.navigateTo({
					url:`/pages/mine/address/address?mode=${'selectadd'}`
				})
			},
			requestAboutWorkercommits(){
		       this.$http({
				   url:workerCommitlist,
				   data:{
					   masterId:this.workeruid
				   },
				   method:"POST",
				   header:{
					   'content-type':'application/x-www-form-urlencoded'
				   }
			   })
			   .then(res=>{
				   // console.log(res);
				   if(res[1].data.status=='200'){
					   this.committexts=res[1].data.data;
					   this.isShowall=new Array(res[1].data.data.length).fill(false);
				   }
			   })
			   .catch(err=>{
				  console.log(err); 
			   });
			},
			employWorker(){
				uni.setStorageSync('employWorkerinfo',this.workerinfo);
				setTimeout(()=>{
					uni.navigateTo({
						url:'../comfirmorder/comfirmorder'
					});
				},200)
			},
			navigateToWorkercases(id){
				uni.navigateTo({
					url:`../workercases/workercases?workerid=${id}`
				});
			}
		},
		computed:{
			showcommitText(){
				 return (index)=>{
					 if(this.isShowall[index] || this.committexts[index].content.length<=80)
					 {
						 const isShowall=this.isShowall;
						 isShowall[index]=true;
						 this.isShowall=isShowall;
						 return this.committexts[index].content;
					 }else{
						 return this.committexts[index].content.substr(0,79)+'...'
					 }
				 }
			}
		},
		filters:{
			getRatePoints(val){
				return val.toFixed(1);
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 height: auto;
		 padding-bottom: 110rpx;
		 .indexDetails_swiper_box{
		 	width: 750rpx;
		 	height: 500rpx;
		 	position: relative;
		 	.indexDetails_back{
		 		width: 25rpx;
		 		height: 39rpx;
		 		position: absolute;
		 		left: 30rpx;
		 		top: 68rpx;
		 		z-index: 9;
		 	}
		 	.indexDetails_swiper{
		 		width: 100%;
		 		height: 100%;
		 		.indexDetails_swiper_banner{
		 			width: 100%;
		 			height: 100%;
		 		}
		 	}
		 	.indexDetails_dots{
		 		width: 81rpx;
		 		height: 45rpx;
		 		border-radius: 10rpx;
		 		background: rgba(0,0,0,0.3);
		 		text-align: center;
		 		position: absolute;
		 		right: 30rpx;
		 		bottom: 25rpx;
		 		text{
		 			color: #FFFFFF;
		 			font-size: 24rpx;
		 		}
		 	}
		 }
		 .workerinfo{
			 width: 700rpx;
			 height: auto;
			 padding-bottom: 35rpx;
			 margin: auto;
			 .worker-infoitem{width: 100%;height: auto;margin-top: 20rpx;display: flex;}
			 .workername{font-size: 35rpx;}
			 .worker-goodat{
				 display: flex;
				 font-size: 28rpx;
				 align-items: center;
				 text{margin-left: 20rpx;}
			}
			.worker-price{display: flex;justify-content: space-between;}
			.worker-price-left{font-size: 28rpx;}
			.worker-price-right{color: rgba(136, 136, 136, 1);font-size: 25rpx;}
			.worker-have-item{font-size: 28rpx;}
			.seconditem{margin-left: 20rpx;}
			.thirditem{margin-left: 20rpx;}
			.star-rates{
				display: flex;
				align-items: center;
				color: rgba(136, 136, 136, 1);
				font-size: 25rpx;
				text{margin-left: 10rpx;}
			}
			.commitsmany{margin-left: 20rpx;color:  rgba(136, 136, 136, 1);font-size: 25rpx;}
			.jdtimes{font-size: 28rpx;}
			.worker-status{padding-left: 15rpx;padding-right:15rpx;padding-top: 10rpx;padding-bottom: 10rpx;background-color: rgba(134, 184, 251, 1);color: #FFFFFF;font-size: 26rpx;border-radius: 10rpx;}
		 }
		 .line{background-color: rgba(243, 243, 243, 1);width: 100%;height: 10rpx;}
		 .worker-cases{
			 width: 700rpx;
			 height: 100rpx;
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 margin: auto;
			 .case-title{font-size: 30rpx;}
			 .cases-right{flex: 1;display: flex;justify-content: flex-end;height: 100%;align-items: center;}
			 .caseitem{
				 width: 70rpx;
				 height: 70rpx;
				 image{border-radius: 5rpx;width:100%;height:100%;}
				 margin-right: 15rpx;
			 }
			 .lastitem{margin-right: 15rpx;}
		 }
		 .worker-commits{
			 width: 700rpx;
			 margin: auto;
			 height: auto;
			 padding-top: 20rpx;
			 .worker-commits-top{
				 width: 100%;
				 height: auto;
				 display: flex;
				 justify-content: space-between;
				 .worker-commits-title{font-size: 30rpx;}
				 .ckall-commits{
					 display: flex;
					 align-items: center;
					 font-size: 25rpx;
					 text{margin-right: 15rpx;}
				}
			 }
			 .worker-commit-item{
				 width: 700rpx;
				 padding-bottom: 20rpx;
				 border-bottom: 1rpx solid #F1F1F1;
				 height: auto;
				 padding-top: 20rpx;
				 .commiter-info{width:100%;height:auto;display: flex;align-items: center;}
				 .commiter-info-right{flex: 1;margin-left: 20rpx;}
				 .commiter-name{font-size: 28rpx;width:100%;display: block;}
				 .publish-time{color: rgba(136, 136, 136, 1);font-size: 25rpx;}
				 .commit-rates{
					 display: flex;
					 width: 100%;
					 align-items: center;
					 margin-top: 20rpx;
					 text{margin-right: 10rpx;}
				}
				.commit-add{color: rgba(34, 34, 34, 1);font-size: 28rpx;width: 100%;margin-top: 20rpx;}
				.commit-content{width: 100%;height: auto;margin-top: 20rpx;font-size: 28rpx;}
				.showall{color: #2979FF;}
				.commit-images{width: 100%;height: auto;margin-top: 20rpx;display: flex;flex-wrap: wrap;justify-content: space-between;}
				.oneimg image{
					width: 400upx;
					height: 500upx;
				}
				.twoimg image{
					width: 340upx;
					height: 250upx;
				}
				.moreimg image{
					width: 220upx;
					height: 235upx;
				}
			 }
		 }
		 .page-bottomnav{
			 width: 100%;
			 height: 110rpx;
			 border-top: 1rpx solid #F1F1F1;
			 display: flex;
			 align-items: center;
			 position: fixed;
			 bottom: 0rpx;
			 background-color: #fff;
			 .page-bottomnav-left{
				 width: 280rpx;
				 height: 100%;
				 display: flex;
				 align-items: center;
				 view{
					 width:80rpx;
					 height: 90rpx;
					 display: flex;
					 flex-wrap: wrap;
					 align-items: center;
					 justify-content: center;
					 margin-left: 35rpx;
					 image{width: 40rpx;height: 40rpx;}
					 text{width: 100%;text-align: center;font-size: 28rpx;}
				}
			}
			.page-bottomnav-right{
				flex: 1;
				height: 100%;
				margin-right: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.yuyue-worker{background-color: rgba(14, 174, 100, 1);color: #FFFFFF;width: 218rpx;border-radius: 10rpx;text-align: center;height: 90rpx;line-height: 90rpx;font-size: 28rpx;}
			    .guyong-worker{background-color: rgba(255, 158, 93, 1);color: #FFFFFF;width: 218rpx;border-radius: 10rpx;text-align: center;height: 90rpx;line-height: 90rpx;font-size: 28rpx;}
			}
		 }
		 .subscribeTitle{font-size: 40rpx;width: 680rpx;margin: auto;display: block;margin-top: 90rpx;}
		 .subscribePrompt{font-size: 28rpx;color: rgba(136, 136, 136, 1);width: 680rpx;margin: auto;display: block;margin-bottom: 20rpx;}
		 .subscribe-form{
			 width: 680rpx;
			 height: auto;
			 margin: auto;
			 margin-top: 20rpx;
			 margin-bottom: 40rpx;
			 .input-cell{background-color: rgba(239, 239, 239, 1);border-radius: 15rpx;width: 100%;height: 90rpx;display: flex;align-items: center;margin-top: 20rpx;}
			 .input-cell-left{width: 150rpx;margin-left: 20rpx;color: rgba(68, 68, 68, 1);font-size: 28rpx;}
			 .input-cell-right{
				 flex: 1;
				 margin-right: 20rpx;
				 display: flex;
				 justify-content: space-between;
				 font-size: 28rpx;
				 align-items: center;
				 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
				 input{flex: 1;font-size: 28rpx;}
				 .toptext{flex: 1;}
				 .getcode{color: rgba(14, 174, 100, 1);text-align: right;}
				 .awaitgetcode{color: rgba(136, 136, 136, 1);text-align: right;}
				 .changetype{color: rgba(136, 136, 136, 1);}
				 .right-icon{width: 15rpx;height: 25rpx;}
				 .changeServicetime{flex: 1;}
				 .change-servicetime{color: rgba(136, 136, 136, 1);}
				 .serviceclock{margin-left: 20rpx;}
				 .editadd{color: rgba(136, 136, 136, 1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
			}
			.submit-subscribe{background-color: rgba(14, 174, 100, 1);color: #FFFFFF;font-size: 28rpx;width: 680rpx;border-radius: 10rpx;text-align: center;height: 80rpx;line-height: 80rpx;margin-top: 40rpx;}
		 }
		 .worktypes{
			 width: 680rpx;
			 height: auto;
			 padding-top: 20rpx;
			 padding-bottom: 40rpx;
			 display: flex;
			 margin: auto;
			 flex-wrap: wrap;
			 .worktype-item{width: 200rpx;height: 70rpx;background-color: rgba(239, 239, 239, 1);text-align: center;line-height: 70rpx;font-size: 28rpx;margin-left: 20rpx;margin-top: 20rpx;color: rgba(68, 68, 68, 1);}
		 }
		 .activetype{
			 background-color: rgba(14, 174, 100, 0.3) !important;
			 color: rgba(14, 174, 100, 1) !important;
		 }
	 }
</style>
